<template>
    <el-dialog  title='联想弹窗-选择记录' :visible="true" width="1000px" @close="cancel()" destroy-on-close :append-to-body="true"> 
        <div>
             <!-- <el-form-item label='联想弹窗'>
                <el-input placeholder="请输入联想弹窗"></el-input>
            </el-form-item> -->
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
                <el-form-item  prop="username">
                    <el-input v-model="search" placeholder="请输入要查询的关键字" clearable  @clear="resetQuery" style="width: 150px"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <template>
                <el-table :reserve-selection="true" v-loading="loading" :data="dataType==='datasource'? columnsDataSelected.slice((this.queryParams.pageNo-1)*this.queryParams.pageSize,this.queryParams.pageNo*this.queryParams.pageSize):dictOptionSelected.slice((this.queryParams.pageNo-1)*this.queryParams.pageSize,this.queryParams.pageNo*this.queryParams.pageSize)"   row-key="id" >
                    <el-table-column label='' width="55"  column-key="redioKey" v-if='columnsDataSelected.length>0||dictOptionSelected.length>0'>
                        <template slot-scope="scope">
                            <el-radio
                                :label="scope.row.id"
                                v-model="singleCheckKey"
                                @change.native="getCurrentRow(scope.row)"
                                style="color: #fff; padding-left: 10px; margin-right: -25px"
                            >{{""}}</el-radio>
                        </template>
                    </el-table-column>
                    <template v-if="dataType=== 'datasource'">
                        <el-table-column v-for="(val, index) in columns" :key="index"  :label="val.comment" :prop="val.value" align="center" ></el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column label="字典标签" prop="label" align="center" ></el-table-column>
                        <!-- <el-table-column label="字典键值" prop="value" align="center" ></el-table-column> -->
                    </template>
                </el-table>
                <pagination v-show="total> 0 && dataType !== 'datasource'" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getColumns"/>
                <pagination v-show="total> 0 && dataType === 'datasource'" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getFieldColumns(dataSource)"/>
            </template>
        </div>
        <div class="button">
            <el-button  @click="cancel">取消</el-button> 
            <el-button type="primary" @click="selectUser">确定</el-button> 
        </div>
    </el-dialog>
</template>

<script>
import {getTableAllData,getTableFields,getFieldColumn} from "@/api/custom/lenovoPopup.js";
import {sourceTestList} from '@/api/custom/formDesigner'
import {getDictData} from '@/api/custom/formDesigner'
export default {
    data() {
        return {
            search: '',
            tags: [],
            loading: false,
            tableData: [],
              // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                username: undefined,
                mobile: undefined,
            },
            singleCheckKey:'',
            total: 0,
            totalTags:[],
            columns:[], //表头
            dictColumns:[{

            }], //数据字典表头
            columnsData:[],// 表格数据
            columnsDataSelected:[], //搜索后的数据
            dictOption:[], //数据字典表格数据
            dictOptionSelected:[] //搜索后的数据
        }
    },
    props: ['tagsList','dataSource','fieldName','dictName','dataType'],
    mounted() {
    //    this.dataSource && this.getColumns()
       this.dataSource && this.getFieldColumns(this.dataSource)
       this.dictName && this.getDictDatas()
    //    this.dataSource && this.getListData()
        this.tags= [...this.tagsList]
    },
    watch:{
        search(val){
            if(!val){
               this.resetQuery()
            }
        }
    },
    methods: {
        //联想弹框数据字典数据
        getDictDatas() {
            getDictData({dictType: this.dictName}).then((res) => {
                if (res.code === 0) {
                    this.dictOption =res.data
                    this.dictOptionSelected =res.data
                    this.total = this.dictOption.length;
                    this.loading = false;
                    this.renderBox(this.dictOption) 
                }
                }).catch(e => {
                    console.log(e)
                })
        },
        //获取筛选后表中所有字段
        getFieldColumns(name){
            sourceTestList(name).then(res=>{
                this.columnsData=res.data.rowMaps
                this.columnsDataSelected = res.data.rowMaps
                this.total = this.columnsData.length;
                this.loading = false;
                this.renderBox(this.columnsData) 
                this.columns=res.data.columns.map(item=>{
                    return {
                        label:item.name,
                        value:item.name,
                        comment:item.name
                    }
                })
            })
        },

        // 查询字段
        getColumns(){
            //获取所有数据,只展示选中字段的数据
            getTableAllData(this.dataSource).then(res=>{
                if(res.code===0){
                    this.columnsData=res.data
                    this.columnsDataSelected = res.data
                    this.total = this.columnsData.length;
                    this.loading = false;
                    this.renderBox(this.columnsData) 
                }
            })
        },
        renderBox(list){
            if (this.tags.length>0) {
                this.$nextTick(() => {
                    this.tags.forEach((tag) => {
                        list.forEach(user => {
                            if (user.id === tag.id) {
                                this.singleCheckKey=user.id
                            }
                        })
                    });
                })
            }
        },
          /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1;
            if(this.dataType === 'datasource'){
                this.columnsDataSelected = this.columnsData
                this.columnsDataSelected = this.columnsDataSelected.filter(data => !this.search || data[this.fieldName].toLowerCase().includes(this.search.toLowerCase()))
            }else{
                this.dictOptionSelected = this.dictOption
                this.dictOptionSelected = this.dictOptionSelected.filter(data => !this.search || data.label.toLowerCase().includes(this.search.toLowerCase()))
            }
        },
        /** 重置按钮操作 */
        resetQuery() {
            if(this.dataType === 'datasource'){
                this.resetForm("queryForm");
                this.columnsDataSelected = this.columnsData
            }else{
                this.resetForm("queryForm");
                this.dictOptionSelected = this.dictOption
            }
            
        },
        /**单选事件 */
        getCurrentRow(val){
            this.tags=[]
            setTimeout(()=>{
                this.tags=[val]
            },400)
        },
        clearUser() {
            this.tags = []
            this.singleCheckKey='';
        },
        cancel() {
            this.clearUser()
            this.$emit('closeDialog')
        },
        selectUser() {
            this.$emit('userInfo',this.tags )
            this.cancel()
        },
    }
}
</script>

<style lang="scss" scoped>
    .button{
        text-align: right;
        margin-top: 35px;
    }
</style>